import { useEffect, useState } from 'react';
import { Button, message } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { Avatar } from 'antd';
import styles from './index.module.scss';
import { useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { userBalance } from '@/service'
import { useTranslation } from 'react-i18next';
import { I18n } from 'emoji-mart';

export default (props) => {
    const [messageApi, contextHolder] = message.useMessage();
    const [balanceNum, setbalanceNum] = useState('');
    const { t, i18n } = useTranslation();
    const initState = () => ({
    }),
        [state, setState] = useState(initState),
        navigate = useNavigate();
    const mainStore = useSelector(store => store.main || {});
    const userInfo = mainStore?.portal_userInfo || {};
    const avatarIcon = userInfo?.avatarUrl ? { src: <img src={userInfo.avatarUrl} /> } : { icon: <UserOutlined /> };
    const goRecharge = () => {
        navigate('/recharge')
    }
    const getBlance = async () => {
        try {
            const res = await userBalance();
            const { code, message, data = 0 } = res || {};
            if (code === 0) {
                setbalanceNum(data);
            } else {
                messageApi.open({
                    type: 'error',
                    content: message,
                });
            }
        } catch (error) {
            if (error?.message) {
                messageApi.open({
                    type: 'error',
                    content: error?.message,
                });
            }
        }
    };
    useEffect(() => {
        getBlance();
    }, [i18n.language]);

    return (
        <div className={styles.container}>
            <div className={styles.content}>
                <div className={styles.basicinfo}>
                    <Avatar size={64} {...avatarIcon} className='avatar-custom' />
                    <div className={styles.text}>
                        <div className={styles.name}> {t('menu.account.tipOne')} <span >{userInfo?.firstName} {userInfo?.lastName}</span></div>
                        <div className={styles.tip}>{t('menu.account.tipTwo')}</div>
                    </div>
                </div>
                <div className={styles.recharge}>
                    <div className={styles.moneyTitle}>{t('menu.account.accountbalance')}</div>
                    <div className={styles.money}>{t('menu.account.unitTwo', { balanceNum })}</div>
                    <Button type='primary' className='custom-btn-primary' onClick={goRecharge} style={{ width: '240px' }}>{t('menu.account.rechargeBtn')}</Button>
                </div>
            </div>
            {contextHolder}
        </div>
    )
}
